---
slug: /examples/combobox
title: Combobox
---

<iframe
  src="https://codesandbox.io/embed/plate-combobox-8kwnd?autoresize=1&fontsize=16&theme=dark"
  style={{
    width: '100%',
    height: '80vh',
    border: 0,
    borderRadius: '8px',
    overflow: 'hidden',
  }}
  title="Plate Playground"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>

<!-- ```ts live -->
<!-- () => { -->
<!--   const id = 'combobox'; -->

<!--   const componentsCombobox = { -->
<!--     ...components, -->
<!--     [ELEMENT_TAG]: TagElement, -->
<!--   }; -->

<!--   const optionsCombobox = createPlateOptions({ -->
<!--     [ELEMENT_TAG]: {}, -->
<!--   }); -->

<!--   // Handle multiple combobox -->
<!--   const useComboboxOnChange = () => { -->
<!--     const editor = useStoreEditorRef(id); -->

<!--     const tagOnChange = useTagOnChange(editor, MENTIONABLES); -->
<!--     const isOpen = useComboboxIsOpen(); -->
<!--     const closeMenu = useComboboxStore((state) => state.closeMenu); -->

<!--     return useCallback( -->
<!--       () => () => { -->
<!--         let changed = false; -->
<!--         changed = tagOnChange(); -->

<!--         if (changed) return; -->

<!--         if (!changed && isOpen) { -->
<!--           closeMenu(); -->
<!--         } -->
<!--       }, -->
<!--       [closeMenu, isOpen, tagOnChange] -->
<!--     ); -->
<!--   }; -->

<!--   // Handle multiple combobox -->
<!--   const ComboboxContainer = () => { -->
<!--     useComboboxControls(); -->

<!--     return <TagCombobox />; -->
<!--   }; -->

<!--   const Editor = () => { -->
<!--     const comboboxOnChange = useComboboxOnChange(); -->

<!--     const tagOnSelect = useTagOnSelectItem(); -->

<!--     // Handle multiple combobox -->
<!--     const comboboxOnKeyDown = useComboboxOnKeyDown({ -->
<!--       onSelectItem: tagOnSelect, -->
<!--     }); -->

<!--     const plugins = useMemo( -->
<!--       () => [ -->
<!--         createReactPlugin(), -->
<!--         createHistoryPlugin(), -->
<!--         createTagPlugin(), -->
<!--         { -->
<!--           onChange: comboboxOnChange, -->
<!--           onKeyDown: comboboxOnKeyDown, -->
<!--         }, -->
<!--       ], -->
<!--       [comboboxOnChange, comboboxOnKeyDown] -->
<!--     ); -->

<!--     return ( -->
<!--       <Plate -->
<!--         id={id} -->
<!--         plugins={plugins} -->
<!--         components={componentsCombobox} -->
<!--         options={optionsCombobox} -->
<!--         editableProps={editableProps} -->
<!--         initialValue={initialValueCombobox} -->
<!--       > -->
<!--         <ComboboxContainer /> -->
<!--       </Plate> -->
<!--     ); -->
<!--   }; -->

<!--   return <Editor /> -->
<!-- } -->
<!-- ``` -->